<template>
    <a-tabs default-active-key="1" @change="callback" size="small"  :tabBarGutter="1">
      <a-tab-pane key="1" tab="单曲">
        <single-table ref="single" />
      </a-tab-pane>
      <a-tab-pane key="10" tab="专辑">
        专辑
      </a-tab-pane>
      <a-tab-pane key="100" tab="歌手">
        歌手
      </a-tab-pane>
      <a-tab-pane key="1000" tab="歌单">
        歌单
      </a-tab-pane>
      <a-tab-pane key="1002" tab="用户">
        用户
      </a-tab-pane>
      <a-tab-pane key="1004" tab="MV">
        MV
      </a-tab-pane>
      <a-tab-pane key="1006" tab="歌词">
        歌词
      </a-tab-pane>
      <a-tab-pane key="1009" tab="电台">
        电台
      </a-tab-pane>
      <a-tab-pane key="1014" tab="视频">
        视频
      </a-tab-pane>
<!--      <a-tab-pane key="1018" tab="综合">-->
<!--        综合-->
<!--      </a-tab-pane>-->
    </a-tabs>
</template>

<script>
import SingleTable from "@/components/web/content/content/searchResult/single";
export default {
  name: "SearchResult",
  components: {SingleTable},
  data(){
    return {
    }
  },
  methods:{
    handleSearchResult(){
      this.$refs.single.updateSearchResult();
    },
    callback(key) {
      console.log(key);
    },
  }
}
</script>

<style scoped>
::v-deep .ant-tabs-nav .ant-tabs-tab-active{
  color: black;
}
::v-deep .ant-tabs-nav .ant-tabs-tab:active{
  color: black;
}
::v-deep .ant-tabs-nav .ant-tabs-tab:hover{
  color: black;
}
::v-deep .ant-tabs-ink-bar{
  background-color: red ;
}
</style>
